const path = require('path'); // node path模块
// vue项目所需loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// html-webpack-plugin插件，生成html文件，包含bundle
const HtmlWebpackPlugin = require('html-webpack-plugin');
// clean-webpack-plugin插件，清除目标目录文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// mini-css-extract-plugin插件，拆分css样式文件到单独的文件之中
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // 基础文件设置为none，
  mode: 'none',
  // 单页文件入口
  entry: './src/main.js',
  // 输出项
  output: {
    // 输出文件名
    filename: 'bundle.[hash:8].js',
    // 输出路径
    path: path.join(__dirname, 'dist'),
  },
  // 插件规则。。
  module: {
    rules: [
      // vue-loader vue文件所需插件
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      // 应用到普通的.js文件，以及.vue文件中的<script>代码块
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
      // eslint校验规则，
      {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
      },
      // 样式校验规则，先用less-loader转换为css，然后用css-loader转换为style标签，然后用style-loader将转换的样式插入到html文件中
      {
        test: /\.less$/,
        use: [{
          loader: 'style-loader',
        }, {
          loader: 'css-loader',
        }, {
          loader: 'less-loader',
        }],
      },
      // 应用到普通的css文件，以及.vue文件中的<style>代码块
      {
        test: /\.css$/,
        use: [
          // 拆分css所需插件规则
          MiniCssExtractPlugin.loader,
          // 'style-loader',
          'css-loader'
        ]
      },
      // url-loader转换插件，将png, jpg, gif文件转换到dist目录，小于10kb的文件按照base64形式转换为编码形式
      {
        test: /\.(png|jpg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024, // 10kb
            esModule: false,
          }
        },
      }
    ]
  },
  plugins: [
    // 清空dist插件
    new CleanWebpackPlugin(),
    // vue转换插件
    new VueLoaderPlugin(),
    // 使用tempalte模板文件生成html，配置生成的html文件中的title, meta
    new HtmlWebpackPlugin({
      title: 'vueeeeee',
      meta: {
        viewport: 'width=device-width'
      },
      template: './src/index.html',
    }),
    // 拆分css文件的配置项
    new MiniCssExtractPlugin({
      filename: '[name].[hash:8].css',
      chunkFilename: '[id].css',
    }),
  ]
};